<template>
  <div id="page-activity-photo">
    <h2>{{ activity.act_name }} - 活动照片</h2>

    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="fr" @click="showCreateModal()">新增照片</Button>
      </div>

      <Tabs size="small" :animated="false" v-model="selectTab">
        <TabPane label="全部" name="all">
          <photo-list :isShow="null" v-if="selectTab === 'all'"></photo-list>
        </TabPane>
        <TabPane label="外网显示" name="outer">
          <photo-list :isShow="0" v-if="selectTab === 'outer'"></photo-list>
        </TabPane>
        <TabPane label="外网不显示" name="inner">
          <photo-list :isShow="1" v-if="selectTab === 'inner'"></photo-list>
        </TabPane>
      </Tabs>
    </card>

    <update-modal :form="form" @submit="getList"></update-modal>
  </div>
</template>

<script>
  import photoList from './components/photo/list'
  import updateModal from './components/photo/update-modal'

  export default {
    name: 'page-activity-photo',
    props: [
      'activity'
    ],
    components: {
      photoList,
      updateModal
    },
    data () {
      let activityId = this.$route.params.activityId
      return {
        selectTab: 'all',
        form: {
          visible: false,
          data: {},
          template: {
            photoPathLs: [],
            pkResource: activityId,
            isShow: 0,
            source: 0
          }
        }
      }
    },
    methods: {
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      getList () {
        this.selectTab = null
        setTimeout(() => {
          this.selectTab = 'all'
        }, 500)
      }
    }
  }
</script>

<style lang="less">
  #page-activity-photo {}
</style>
